<template>
  <div class="container">
    <div class="header bg-cf">
      <img src="@/assets/img/icon/message/message-140.svg" alt="" />
      全部评论
      <span>{{ list?.length ?? 0 }}条</span>
    </div>
    <div
      class="infinite-list"
      v-infinite-scroll="load"
      :infinite-scroll-disabled="disabled"
      style="overflow: auto"
    >
      <!-- <currentItem
        v-for="(item, index) in list"
        :info="item"
        :key="index"
        class="b-active mlr-15"
      ></currentItem> -->
      <div class="content-box bg-cf">
        <el-row :gutter="34" v-for="(item, index) in list" :key="index">
          <el-col :span="2">
            <el-avatar :size="70" :src="item.avatar"></el-avatar>
          </el-col>
          <el-col :span="22">
            <div class="content">
              <p class="c6">
                <span class="c-active mr-10">{{ item.name }}</span>
                {{ $day(item.created_at * 1000).format('YYYY-MM-DD hh:mm') }}
                <el-rate
                  style="float: right"
                  :model-value="parseInt(item.score)"
                  disabled
                  text-color="#ff9900"
                >
                </el-rate>
              </p>
              <p class="c6 text-hide2 lh-30">
                {{ item.content }}
              </p>
            </div>
          </el-col>
        </el-row>
      </div>
      <p v-if="loading" class="text-center pt-10 c6">加载中...</p>
      <p v-if="noMore" class="text-center pt-10 c6">没有更多了</p>
    </div>
  </div>
</template>

<script lange="ts">
import { defineComponent, ref, computed } from 'vue'
import { CommentList } from '@/service/api/doctor'
export default defineComponent({
  name: 'commentPage',

  setup() {
    const count = ref(0)
    const loading = ref(false)
    let page = ref(1)
    const noMore = ref(false)
    let list = ref([])
    const disabled = computed(() => loading.value || noMore.value)
    const load = () => {
      loading.value = true
      let params = {
        limit: 10,
        page: page.value
      }
      CommentList(params).then((res) => {
        if (res.code == 200) {
          page.value++
          loading.value = false
          list.value = [...list.value, ...res.data.list]
          if (res.data.count == list.value.length) {
            noMore.value = true
          }
        }
      })
      // setTimeout(() => {
      //   count.value += 2
      //   loading.value = false
      // }, 2000)
    }
    return {
      count,
      load,
      loading,
      disabled,
      noMore,
      list
    }
  }
})
</script>

<style lang="less" scoped>
.header {
  color: #1f1f1f;
  padding: 20px 40px;
  margin-bottom: 10px;
  font-size: 36px;
  img {
    width: 60px;
    height: 60px;
    vertical-align: middle;
  }
  span {
    color: #ff0000;
    margin-left: 10px;
  }
}
.infinite-list {
  height: 844px;
  padding: 0;
  margin: 0;
  list-style: none;
  &::-webkit-scrollbar {
    display: none;
  }
  .infinite-list-item {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 50px;
    background: pink;
    margin: 10px;
    color: #fff;
    & + .list-item {
      margin-top: 10px;
    }
  }
}
.content-box {
  padding: 20px 35px 42px 40px;
  .content {
    padding: 31px 0 31px 0;
    border-bottom: 1px solid #cdcdcd;
  }
}
</style>
